<template>
  <div v-if="tabsList.length">
    <div class="home-title pt-32 pb-16">操盘实战课程</div>
    <div class="theme-card">
      <tabs :tabs="tabsList" :active="activeTab" @change="tabChange"></tabs>
      <div v-for="(item, index) in liveInfoList" :key="index">
        <div v-show="index === activeTab">
          <div class="theme-icon" :class="'icon-' + tabsList[index].id"></div>
          <CourseContainer :info="item"></CourseContainer>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tabs from '@/components/common/Tab.vue';
import CourseContainer from '@/components/live/CourseContainer.vue';
import query from '@/lib/query.js';
export default {
  name: 'CourseCard',
  components: { tabs, CourseContainer },
  data() {
    return {
      tabsList: [],
      // 课程的信息，用sid做key
      productList: {},
      liveInfoList: [],
      activeTab: 0,
      // 保存传入的数据
      tabs: [],
      info: [],
      courseRes: [],
    };
  },
  created() {
    this.queryList();
  },
  methods: {
    tabChange(index) {
      window.statConf.click('course.tab');
      this.activeTab = index;
    },
    init(tab, info) {
      // 首页传入数据
      this.tabs = _t.deepClone(tab);
      this.info = _t.deepClone(info);
      this.initData();
    },
    initData() {
      // 重新组装数据
      if (this.info.length && this.courseRes.length) {
        this.info.forEach(e => {
          e.products = this.productList[e.sid];
        });
        this.tabsList = this.tabs;
        this.liveInfoList = this.info;
      }
    },
    queryList() {
      query
        .getCourseList()
        .then(res => {
          this.courseRes = res?.data?.product_list || [];
          this.formatData(res?.data?.product_list);
          this.initData();
        })
        .catch(err => {
          // 这里失败仅板块不展示
          this.catchErrHandler(err);
        });
    },
    formatData(data) {
      if (data && data.length) {
        data.forEach(e => {
          this.productList[e.sid] = e;
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.theme-card {
  overflow: hidden;
}
.theme-icon {
  display: block;
  position: absolute;
  top: 1rem;
  right: 0.46rem;
}
</style>
